<%--
  Created by IntelliJ IDEA.
  User: gaopeng
  Date: 2021/7/8
  Time: 23:29
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/jquery.fSelect.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.fSelect.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('.demo').fSelect();
        });
       <%-- //----------------------------------------------------------------------------------
        //获取浏览器页面可见高度和宽度
        var _PageHeight = document.documentElement.clientHeight,
            _PageWidth = document.documentElement.clientWidth;
        //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
        var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
            _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
        //在页面未加载完毕之前显示的loading Html自定义内容
        var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px;  border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">页面加载中，请等待...</div></div>';
        //监听加载状态改变
        document.onreadystatechange = completeLoading;
        document.write(_LoadingHtml);
        //加载状态为complete时移除loading效果
        function completeLoading() {
            if (document.readyState == "complete") {
                setTimeout(function(){
                    loadingMask = document.getElementById('loadingDiv');
                    document.getElementById('loadingDiv').parentNode.removeChild(loadingMask);
                    console.log(this);
                },3000);
            }
        }--%>

        /*----------------------------获取select的多个option参数---------------------------*/
        function getSelectOption(){
            //pid
            var str_pid=[];
            var obj_pid = document.getElementById("pidlist_");
            for(var i=0;i<obj_pid.options.length;i++){
                if(obj_pid.options[i].selected){
                    str_pid.push(obj_pid.options[i].value);// 收集选中项
                }
            }
            $("#pidlist_i").val(str_pid);
            //pname
            var str_pname=[];
            var obj_pname = document.getElementById("pnamelist_");
            for(var i=0;i<obj_pname.options.length;i++){
                if(obj_pname.options[i].selected){
                    str_pname.push(obj_pname.options[i].value);// 收集选中项
                }
            }
            $("#pnamelist_i").val(str_pname);
            //marketprice
            var str_marketprice=[];
            var obj_marketprice = document.getElementById("marketpricelist_");
            for(var i=0;i<obj_marketprice.options.length;i++){
                if(obj_marketprice.options[i].selected){
                    str_marketprice.push(obj_marketprice.options[i].value);// 收集选中项
                }
            }
            $("#marketpricelist_i").val(str_marketprice);
            //price
            var str_price=[];
            var obj_price = document.getElementById("pricelist_");
            for(var i=0;i<obj_price.options.length;i++){
                if(obj_price.options[i].selected){
                    str_price.push(obj_price.options[i].value);// 收集选中项
                }
            }
            $("#pricelist_i").val(str_price);
            //price
            var str_ishot=[];
            var obj_ishot = document.getElementById("ishotlist_");
            for(var i=0;i<obj_ishot.options.length;i++){
                if(obj_ishot.options[i].selected){
                    str_ishot.push(obj_ishot.options[i].value);// 收集选中项
                }
            }
            $("#ishotlist_i").val(str_ishot);
            //price
            var str_pdate=[];
            var obj_pdate = document.getElementById("pdatelist_");
            for(var i=0;i<obj_pdate.options.length;i++){
                if(obj_pdate.options[i].selected){
                    str_pdate.push(obj_pdate.options[i].value);// 收集选中项
                }
            }
            $("#pdatelist_i").val(str_pdate);
            //pflag
            var str_flag=[];
            var obj_flag = document.getElementById("flaglist_");
            for(var i=0;i<obj_flag.options.length;i++){
                if(obj_flag.options[i].selected){
                    str_flag.push(obj_flag.options[i].value);// 收集选中项
                }
            }
            $("#flaglist_i").val(str_flag);
            //cid
            var str_cid=[];
            var obj_cid = document.getElementById("cidlist_");
            for(var i=0;i<obj_cid.options.length;i++){
                if(obj_cid.options[i].selected){
                    str_cid.push(obj_cid.options[i].value);// 收集选中项
                }
            }
            $("#cidlist_i").val(str_cid);
        }
        /*----------------------------获取select的多个option参数---------------------------*/

    </script>

    <style type="text/css">
        select{
            width: 10px;
        }
    </style>
    <title>商品列表</title>

</head>
<body>
    <div class="container" style="width: 100%">

        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="page-header">
                    <h1>
                        <small>商品列表 —— 显示所有商品</small>
                    </h1>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 column">
                <a class="btn btn-primary" href="${pageContext.request.contextPath}">新增</a>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-hover table-striped">
                    <form action="${pageContext.request.contextPath}/product/formSelect3" method="post">
                        <thead>
                        <tr>
                            <th>
                                <div style="float: left">商品编号</div>
                                <br>
                                <div style="float: left">
                                    <input name="pidlist_" id="pidlist_i" type="hidden">
                                    <select class="demo" multiple="multiple" id="pidlist_">
                                        <c:forEach var="pids" items="${requestScope.get('pidMap')}">
                                            <option value="${pids.key}">${pids.key}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </th>
                            <th>
                                <div style="float: left">商品名字</div>
                                <br>
                                <div style="float: left">
                                    <input name="pnamelist_" id="pnamelist_i" type="hidden">
                                    <select class="demo" multiple="multiple" id="pnamelist_">
                                        <c:forEach var="pnames" items="${requestScope.get('pnameMap')}">
                                            <option value="${pnames.key}">${pnames.key}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </th>
                            <th>
                                <div style="float: left">市场价格</div>
                                <br>
                                <div style="float: left">
                                    <input name="marketpricelist_" id="marketpricelist_i" type="hidden">
                                    <select class="demo" multiple="multiple" id="marketpricelist_">
                                        <c:forEach var="marketprices" items="${requestScope.get('marketpriceMap')}">
                                            <option value="${marketprices.key}">${marketprices.key}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </th>
                            <th>
                                <div style="float: left">商品价格</div>
                                <br>
                                <div style="float: left">
                                    <input name="pricelist_" id="pricelist_i" type="hidden">
                                    <select class="demo" multiple="multiple" id="pricelist_">
                                        <c:forEach var="prices" items="${requestScope.get('priceMap')}">
                                            <option value="${prices.key}">${prices.key}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </th>
                            <th>
                                <div style="float: left">上架时间</div>
                                <br>
                                <div style="float: left">
                                    <input name="pdatelist_" id="pdatelist_i" type="hidden">
                                    <select class="demo" multiple="multiple" id="pdatelist_">
                                        <c:forEach var="pdates" items="${requestScope.get('pdateMap')}">
                                            <option value="${pdates.key}">${pdates.key}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </th>
                            <th>
                                <div style="float: left">是否热门</div>
                                <br>
                                <div style="float: left">
                                    <input name="ishotlist_" id="ishotlist_i" type="hidden">
                                    <select class="demo" multiple="multiple" id="ishotlist_">
                                        <c:forEach var="ishots" items="${requestScope.get('ishotMap')}">
                                            <option value="${ishots.key}">${ishots.key}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </th>
                            <th>
                                <div style="float: left">商品标志</div>
                                <br>
                                <div style="float: left">
                                    <input name="flaglist_" id="flaglist_i" type="hidden">
                                    <select class="demo" multiple="multiple" id="flaglist_">
                                        <c:forEach var="flags" items="${requestScope.get('flagMap')}">
                                            <option value="${flags.key}">${flags.key}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </th>
                            <%--<th>图片地址</th>-->
                            <%--<th>商品描述</th>--%>
                            <th>
                                <div style="float: left">商品分类</div>
                                <br>
                                <div style="float: left">
                                    <input name="cidlist_" id="cidlist_i" type="hidden">
                                    <select class="demo" multiple="multiple" id="cidlist_">
                                        <c:forEach var="cids" items="${requestScope.get('cidMap')}">
                                            <option value="${cids.key}">${cids.key}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </th>
                            <th>
                                <div style="float: left">操作</div>
                                <br>
                                <div style="float: left">
                                    <input type="submit" name="submit" class="btn btn-primary" value="提交筛选" onclick="getSelectOption()"></input>
                                </div>
                            </th>
                        </tr>
                        </thead>
                    </form>
                    <tbody>
                    <c:forEach var="product" items="${requestScope.get('productList')}">
                        <tr>
                            <td>${product.getPid()}</td>
                            <td>${product.getPname()}</td>
                            <td>${product.getMarket_price()}</td>
                            <td>${product.getShop_price()}</td>
                            <%--<td>${product.getPimage()}</td>--%>
                            <td>${product.getPdate()}</td>
                            <td>${product.getIs_hot()}</td>
                            <%--<td>${product.getPdesc()}</td>--%>
                            <td>${product.getPflag()}</td>
                            <td>${product.getCid()}</td>
                            <td>
                                <a href="${pageContext.request.contextPath}">更改</a> |
                                <a href="${pageContext.request.contextPath}">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
                <div>${pageTool}</div>
            </div>
        </div>
    </div>
    <jsp:include page="frameFooter.jsp"/>
</body>
</html>
